flex items not taking full width

.flexContainer {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.item:first-child {
  flex: 1 1 100%;
  margin-bottom: 20px;
}

.item {
  flex: 1 1 40%;
  height: 50px;
  background-color: red;
  margin: 0 20px;
}

.flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.item:first-child {
  flex: 1 1 100%;
  height: 100vh;
  width: 300px;
  margin-bottom: 20px;
}

.item {
  flex: 1 1 40%;
  height: 50px;
  background-color: red;
  margin: 0 20px;
}